<template>
	<!-- 注册页面-只限供应商注册  -->
	<div id="register">
		<div class="register_head_title">
			加入我们，成为供应商
			
			<a href="/" class="back">  返 回  </a>
		</div>
		<el-divider />
		<el-steps :space="200" :active="stepValue" finish-status="success" style="margin-left: 50px;">
		    <el-step title="填写用户信息" />
		    <el-step title="填写商铺信息" />
		    <el-step title="完成" />
		  </el-steps>
		<div class="register_box">
			<!--用户信息注册-->
			<el-card style="width: 48%;text-align: center;display: inline-block;position: absolute;left: 0;">
				<div class="register_title">用户信息</div>
				<el-form
				label-position="right"
				label-width="100px"
				:rules="rules_suer"
				:model="registerData"
				ref="userFrom"
				 class="register_user">
					<el-form-item label="账号" prop="account">
						<el-input placeholder="3228548975@qq.com" v-model="registerData.account"></el-input>
					</el-form-item>
					<el-form-item label="昵称" prop="name">
						 <el-input placeholder="卢斌" v-model="registerData.name"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						 <el-input type="password" placeholder="input your password" v-model="registerData.password"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop="checkPassword">
						 <el-input type="password" placeholder="check your password" v-model="registerData.checkPassword"></el-input>
					</el-form-item>
					<el-form-item label="年龄" style="width: 50%;" prop="age">
						<el-input placeholder="18" v-model="registerData.age" type="number"></el-input>
					</el-form-item>
					<el-form-item label="性别" style="width: 50%;" prop="gender">
						<el-select v-model="registerData.gender" placeholder="男">
						    <el-option label="男" value="男" />
						    <el-option label="女" value="女" />
						</el-select>
					</el-form-item>
					<el-form-item label="联系方式" prop="phone_number">
						<el-input placeholder="17268329667" v-model="registerData.phone_number"></el-input>
					</el-form-item>
					<el-form-item label="邮件" prop="email">
						<el-input placeholder="3228548975@qq.com" v-model="registerData.email"></el-input>
					</el-form-item>
					<el-form-item label="联系地址" prop="address">
						<el-input placeholder="湖南省岳阳市岳阳楼区xx街道xx号" v-model="registerData.address"></el-input>
					</el-form-item>
				</el-form>
			</el-card>
			
			<!--中间图标-->
			<div class="register_center_icon" @click="nextStep()">
				=>
			</div>
			
			<!--供应商信息注册-->
			<el-card style="width: 48%;text-align: center;display: inline-block;position: absolute;right: 0;">
				<div class="register_title">商铺信息</div>
				<el-form class="register_supplier"
					label-position="right"
					label-width="100px"
					:rules="rules_supplier"
					:model="registerData"
					ref="supplierFrom"
					>
					<el-form-item label="公司名称" prop="supplier_name">
						<el-input placeholder="力士商贸有限责任公司" @focus="nextStep()" v-model="registerData.supplier_name"></el-input>
					</el-form-item>
					<el-form-item label="法务人" prop="supplier_manager">
						<el-input placeholder="XXX" v-model="registerData.supplier_manager"></el-input>
					</el-form-item>
					<el-form-item label="商品" prop="product">
						<el-input placeholder="力士沐浴露" v-model="registerData.product"></el-input>
					</el-form-item>
					<el-form-item label="合作时间" prop="cooperate_time">
						<el-date-picker
							  type="date"
							  placeholder="Pick a date"
							  style="width: 100%"
						      v-model="registerData.cooperate_time"  />
					</el-form-item>
					<el-form-item label="描述">
						<el-input type="textarea" v-model="registerData.describe" placeholder="对于公司或者商品的描述....."></el-input>
					</el-form-item>
				</el-form>
			</el-card>
		</div>
		<!--提交-->
		<div class="sumbit_box">
			<el-button type="success" style="width: 200px;" @click="sumbit_register()">注册</el-button>
		</div>
	</div>
</template>

<script>
	export default {
	  data() {
	    return {
	      registerData:{
		
		  },
		  stepValue:1,
		  /**
		   * 用户注册表单验证
		   */
		  rules_suer:{
			account:[
				{ required: true, message: '请填写用户名', trigger: 'blur' },
				{ type: 'email',message: '请输入正确的用户格式',trigger: ['blur', 'change']}
			],
			name:[
				{ required: true, message: '请填写昵称', trigger: 'blur' },
				{min:2,max:10,message:'昵称2-10个字符',trigger:'blur'}
			],
			password:[
				{ required: true, message: '请输入密码', trigger: 'blur' },
				{min:8,max:15,message:'密码8-15个字符',trigger:'blur'}
			],
			checkPassword:[
				{ required: true, message: '请再次输入密码', trigger: 'blur' },
				{ validator: this.checkPasswordFun, trigger: 'blur' }
			],
			age:[
				{ required: true, message: '请填写年龄', trigger: 'blur' },
				{validator:this.checkAgeFun,trigger:'blur'}
			],
			gender:[
				{ required: true, message: '请选择性别', trigger: ['blur', 'change'] }
			],
			phone_number:[
				{ required: true, message: '请输入11位的手机号码', trigger: 'blur' },
				{validator:this.checkPhoneFun,trigger:'blur'}
			],
			email:[
				{ type: 'email',message: '请输入正确的邮箱',trigger: ['blur']}
			],
			address:[
				{ required: true, message: '请输入联系地址', trigger: 'blur' },
			]
		  },
		  /**
		   * 供应商表单验证
		   */
		  rules_supplier:{
			 supplier_name:[
				{ required: true, message: '请输入公司名称', trigger: 'blur' },
			 ],
			 supplier_manager:[
				{ required: true, message: '请输入法人名称', trigger: 'blur' },
				{min:2,max:10,message:'法人名称2-10个字符', trigger: 'blur'}
			 ],
			 product:[
				{ required: true, message: '请输入商品名称', trigger: 'blur' }
			 ],
			 cooperate_time:[
				{ required: true, message: '请选择输入合作时间', trigger: 'blur' }
			 ]
		  },
		}  
	  },
	  methods: {
		/**
		 * 下一步
		 */
		nextStep:function(){
			this.stepValue=2
		},
		/**
		 * 注册
		 */
		sumbit_register:function(){
			/**
			 * 检查俩个表单的验证有没有通过
			 */
			const userValid = this.$refs.userFrom.validate(res1=>{
				if(res1){
					console.log('用户表单验证成功')
					const supplierValid = this.$refs.supplierFrom.validate(res2=>{
						if(res2){
							this.stepValue=3;
							console.log('供应商表单验证成功')
							
							/**
							 * 注册请求
							 */
							
							this.$axios({
							  method: 'post',
							  url: '/register',
							  params: {
							    registerData:JSON.stringify(this.registerData)
							  }
							}).then(res=>{
								let code=res.code;
								if(code==200){
									this.$message.success('注册成功')
									this.$router.push('/');
								}else{
									this.$message.error(res.message)
								}
							}).catch(eror=>{
								this.$message.error('网络错误')
							})
						}else{
							this.$message.error('请填写商铺信息')
						}
					});
				}else{
					this.$message.error('请填写用户信息')
				}
			});
			
			
			
		},
		/**
		 * 自定义密码验证
		 * @param {Object} rule
		 * @param {Object} value
		 * @param {Object} callback
		 */
		checkPasswordFun:function(rule, value, callback){
			if(value!=this.registerData.password){
				callback(new Error('两次密码输入不一致'));
			}else{
				callback();
			}
		},
		/**
		 * 自定义年龄验证
		 * @param {Object} rule
		 * @param {Object} value
		 * @param {Object} callback
		 */
		checkAgeFun:function(rule, value, callback){
			if(value<=0 || value>=150){
				callback(new Error('年龄不正确'));
			}else{
				callback();
			}
		},
		/**
		 * 自定义手机号码格式验证
		 */
		checkPhoneFun:function(rule, value, callback){
			const phoneRegexp = /^1[0-9]{10}$/;
			if (!phoneRegexp.test(value)) {
				callback(new Error('手机号码格式不正确'));
			}else{
				callback();
			}
		},
	  }
	}
</script>

<style>
	#register{
		width: 100%;
	}
	.register_head_title{
		font-size: 26px;
		font-weight: bold;
		color: #337ecc;
		margin-left: 30px;
		margin-top: 20px;
	}
	.back{
		position: absolute;
		right: 50px;
		color: #666;
		font-size: 20px;
		margin-top: 15px;
	}
	.register_box{
		margin: 0 auto;
		background-color: #fff;
		position: relative;
		top: 50px;
	}
	.register_user{
		width: 350px;
		margin-left: 150px;
		
	}
	.register_center_icon{
		position: absolute;
		left: 48%;
		width: 2%;
		text-align: center;
		margin-top: 300px;
		margin-left: 15px;
		font-weight: bold;
		font-size: 18px;
		color: #529b2e;
	}
	.register_supplier{
		height: 400px;
		width: 350px;
		margin-left: 150px;
		margin-top: 50px;
	}
	.register_title{
		text-align: left;
		font-weight: bold;
		font-size: 18px;
		height: 50px;
		margin-left: 20px;
	}
	.sumbit_box{
		height: 100px;
		width: 100%;
		margin-top: 650px;
		text-align: center;
	}
	.next_btn{
		position: absolute;
		right: 20px;
		top: 50%;
	}
</style>